<template>
    <div id="hamburger" class="hamburger-container" @click="changeSiderStatus">
        <el-icon>
            <component :is='icon' :color="iconColor"></component>
        </el-icon>
    </div>
</template>
  
<script setup>
import { computed } from 'vue'
import { useWebStore } from '../../store/webStore'

const store = useWebStore()

const changeSiderStatus = () => {
    store.changeSidebar()
}

const icon = computed(() => {
    return store.sidebarStatus ? 'Expand' : 'Fold'
})

const iconColor = computed(() => {
    return store.theme === 'dark' ? '#fff' : '#141414'
})
</script>
  
<style lang="scss" scoped>
.hamburger-container {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 16px;
    box-sizing: border-box;
    cursor: pointer;
}
</style>
  